<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>订单列表</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
        content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi" />
    <meta http-equiv="Access-Control-Allow-Origin" content="*">
    <link rel="shortcut icon" href="../static/TG_logo.jpg" type="image/x-icon" />
    <link rel="stylesheet" href="../static/css/font.css">
    <link rel="stylesheet" href="../static/css/xadmin.css">
    <link rel="stylesheet" href="../static/css/modal.css">
    <script src="../static/js/jquery.min.js"></script>
    <script type="text/javascript" src="../static/lib/layui/layui.js" charset="utf-8"></script>
    <script type="text/javascript" src="../static/js/xadmin.js"></script>
    <!-- 让IE8/9支持媒体查询，从而兼容栅格
    [if lt IE 9]>
    <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
    <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
    <![endif] -->
</head>

<body>
    <div class="x-nav">
        <span class="layui-breadcrumb">
            <a>首页</a>
            <a>订单管理</a>
            <a><cite>订单列表</cite></a>
        </span>
        <a class="layui-btn layui-btn-primary layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right"
            href="javascript:location.replace(location.href);" title="刷新">
            <i class="layui-icon" style="line-height:38px">ဂ</i>
        </a>
    </div>
    <div class="x-body">
        <div class="layui-row">
            <form class="layui-form layui-col-md12 x-so">
                <input type="text" name="username" placeholder="请输入订单号" autocomplete="off" class="layui-input">
                <button class="layui-btn" lay-submit="" lay-filter="sreach"><i class="layui-icon">&#xe615;</i></button>
            </form>
        </div>
        <xblock>
            <button class="layui-btn layui-btn-danger" onclick="delAll()"><i class="layui-icon"></i>批量删除</button>
            <button class="layui-btn" onclick="x_admin_show('添加订单','/order-add.html')"><i class="layui-icon"></i>添加
            </button>
            <span class="x-right" style="line-height:40px">共有数据：88 条</span>
        </xblock>
        <table class="layui-table">
            <thead>
                <tr>
                    <th>
                        <div class="layui-unselect header layui-form-checkbox" lay-skin="primary"><i
                                class="layui-icon">&#xe605;</i></div>
                    </th>
                    <th>订单编号</th>
                    <th>商品编号</th>
                    <th>买家</th>
                    <th>卖家</th>
                    <th>交易数量</th>
                    <th>应付金额</th>
                    <th>订单状态</th>
                    <th>下单时间</th>
                    <th>状态更新时间</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody id="order_list">
                <tr>
                    <td>
                        <div class="layui-unselect layui-form-checkbox" lay-skin="primary"><i
                                class="layui-icon">&#xe605;</i>
                        </div>
                    </td>
                    <td name="oid">202108101822</td>
                    <td name="cid">255461521554</td>
                    <td>老王</td>
                    <td>老何</td>
                    <td>10</td>
                    <td>1000</td>
                    <td>待确认</td>
                    <td>2021-07-31 18:22</td>
                    <td>2021-08-01 18:22</td>
                    <td class="td-manage">
                        <a title="编辑" onclick="updateUser(this,id)" href="javascript:;">
                            <i class="layui-icon">&#xe642;</i>
                            <a title="删除" onclick="order_del(this,id)" href="javascript:;">
                                <i class="layui-icon">&#xe640;</i>
                            </a>
                    </td>
                </tr>
            </tbody>
        </table>

        <!-- 分页 -->
        <div class="page">
            <!-- 分页 -->
            <div id="pagination" class="pagination text-center">

            </div>
        </div>

        <!-- 用户点击修改时弹出的模态框 -->
        <div class="modal">
            <div class="modal-dialog">
                <div class="modal-content">
                </div>
            </div>
        </div>

        <script>
            var user = window.localStorage.getItem('TGshop_admin')
            console.log("user>>>>>>"+user)
            
            // *请求列表数据*//
            $.ajax({
                type: 'get',
                url: 'http://127.0.0.1:8000/v1/TGadmin/order/' + user,
                dataType: 'json',
                contentType: 'application/json',
                header:"Access-Control-Allow-Origin: *",
                beforeSend: function (request) {
                    request.setRequestHeader("authorization", localStorage.getItem('TGshop_token'))
                },
                success: function (data) {
                    // alert(data);
                    var html = ""
                    // 2 数组遍历,将<tr><td>这样的标签和数据做动态的拼接
                    $.each(data, function (index, obj) {
                        html += ` 
                            <tr>
                            <td>
                                <div class="layui-unselect layui-form-checkbox" lay-skin="primary"><i
                                        class="layui-icon">&#xe605;</i>
                                </div>
                            </td>
                            <td name='oid'>`+ data.order_id + `</td>
                            <td>`+ data.buyer_name + `</td>
                            <td>`+ data.seller_name + `</td>
                            <td>`+ data.amount + `</td>
                            <td>`+ data.total_price + `</td>
                            <td>`+ data.order_status + `</td>
                            <td>`+ data.created_time + `</td>
                            <td>`+ data.updated_time + `</td>
                            <td class="td-manage">
                                <a title="编辑" onclick="updateUser(div,id)" href="javascript:;">
                                    <i class="layui-icon">&#xe642;</i>
                                </a>
                                <a title="删除" onclick="order_del(this,'要删除的id')" href="javascript:;">
                                    <i class="layui-icon">&#xe640;</i>
                                </a>
                            </td>
                        </tr>
                        `
                    });
                    // 3 显示
                    $('#order_list').html(html);
                }
            });
        
            //*分页处理数据*//
            $.ajax({
                type: 'get',
                url: 'http://127.0.0.1:8000/v1/TGadmin/order/' + user,
                dataType: 'json',
                contentType: 'application/json',
                header:"Access-Control-Allow-Origin: *",
                beforeSend: function (request) {
                    request.setRequestHeader("authorization", localStorage.getItem('TGshop_token'))
                },
                success: function (data) {
                    var pageNum = 1,
                        pageSize = 10,
                        totalRow = data.order_num
                    initPagination();
                    /** 更多-分页初始化 */
                    function initPagination() {
                        /** 生成分页 */
                        layui.use('laypage', function () {
                            var laypage = layui.laypage;
                            //执行一个laypage实例
                            laypage.render({
                                elem: 'pagination', // ID，不用加 # 号
                                theme: '#c90b0b',   // 自定义主题
                                curr: parseInt(pageNum), // 当前页
                                count: parseInt(totalRow), // 数据总数，从服务端得到,
                                limit: parseInt(pageSize), // 每页显示的条数。laypage将会借助 count 和 limit 计算出分页数。
                                layout: ['prev', 'page', 'next', 'count', 'skip', 'limit'], // 按钮自定义排版,
                                jump: function (obj, first) { // 切换分页的回调
                                    if (!first) {
                                        pageNum = obj.curr;
                                        pageSize = obj.limit;
                                        initPagination();
                                    }
                                }
                            });
                        });
                    }
                }
            })
        
            //*订单-删除*//
            function order_del(obj, id) {
                layer.confirm('确认要删除吗？', function (index) {
                    //发异步删除数据
                    var order_id = $('#oid').val()
                    $.ajax({
                        type: 'delete',
                        url: 'http://127.0.0.1:8000/v1/TGadmin/order/' + user,
                        data: JSON.stringify(order_id),
                        dataType: 'json',
                        contentType: 'application/json',
                        header:"Access-Control-Allow-Origin: *",
                        beforeSend: function (request) {
                            request.setRequestHeader("authorization", localStorage.getItem('TGshop_token'))
                        },
                        success(data) {
                            if (data.code == 200) {
                                $(obj).parents("tr").remove();
                                layer.msg('已删除!', { icon: 1, time: 1000 });
                            } else {
                                alert(data.error)
                            }
                        }
                    });
                });
            }
        
            //*订单-批量删除*//
            function delAll(argument) {
                var data = tableCheck.getData();
                //选中的个数
                var long = data.length;
                var arr = [];
                //给数组赋值选中的id
                for (var i = 0; i < long; i++) {
                    //children('.td)为选中class为td的值，这个值为我们要选中的id.
                    arr[i] = $(".layui-form-checked").not('.header').parents('tr').children('.td').eq(i).html();
                }
                layer.confirm('确认要删除吗？' + data, function (index) {
                    //将选中的数据arr，发异步进行删除
                    $.ajax({
                        type: 'delete',
                        data: JSON.stringify(arr),
                        url: 'http://127.0.0.1:8000/v1/TGadmin/order/' + user,
                        dataType: 'json',
                        contentType: 'application/json',
                        header:"Access-Control-Allow-Origin: *",
                        beforeSend: function (request) {
                            request.setRequestHeader("authorization", localStorage.getItem('TGshop_token'))
                        },
                        success(data) {
                            if (data.code == 200) {
                                layer.msg('删除成功', { icon: 1 });
                                $(".layui-form-checked").not('.header').parents('tr').remove();
                            } else {
                                alert(data.error)
                            }
                        }
                    });
                });
            }
        
            //修改功能
            function updateUser(div, id) {
                $("div.modal").css({ display: 'block' });
                // console.log($(div).parent().parent().children());
                var html = $(div).parent().parent().children();
                var order_id = $('#oid').val()
                console.log("----", html, div, id)
                $("div.modal-content").html(`
                        买家名: <input type="text"  class="buyer_name" value="${html[3].innerHTML}"><br>
                        卖家名: <input type="text" class="seller_name" value="${html[4].innerHTML}"><br>
                        交易数量: <input type="text" class=" amount" value="${html[5].innerHTML}"><br>
                        总金额: <input type="text" class="total_price" value="${html[6].innerHTML}"><br>
                       订单状态 : <input type="text" class="order_status" value="${html[7].innerHTML}"><br>
                       <button class="btn_succ">确定</button>
                      <button class="btn_fail">取消</button>
                `);
                //取消按钮
                $("button.btn_fail").click(function () {
                    $("div.modal").css({ display: "none" })
                })
                //管理员修改获取数据：
                var arr = [];
                $("div.modal-content").on("change", "input", function () {
                    arr = [];
                    // console.log($(e.target).val());
                    var buyer_name = $(".buyer_name").val();
                    var seller_name = $(".seller_name").val();
                    var amount = $(".amount").val();
                    var total_price = $(".total_price").val();
                    var order_status = $(".order_status").val();
                    arr.push(buyer_name, seller_name, amount, total_price, order_status);
                })
                $(".btn_succ").click(function () {
                    if (arr.length == 0) {
                        console.log("用户没有修改");
                    } else {
                        $.ajax({
                            type: 'put',
                            url: 'http://127.0.0.1:8000/v1/TGadmin/order/' + user,
                            contentType: 'application/json',
                            data: JSON.stringify({ buyer_name: arr[0], seller_name: arr[1], amount: arr[2], total_price: arr[3], order_status: arr[4], id: order_id }),
                            header:"Access-Control-Allow-Origin: *",
                            beforeSend: function (request) {
                                request.setRequestHeader("authorization", localStorage.getItem('TGshop_token'))
                            },
                            success(data) {
                                if (data.code == 200) {
                                    // alert(data.data)
                                    layer.alert("编辑成功", { icon: 6 }, function () {
                                        // 获得frame索引
                                        var index = parent.layer.getFrameIndex(window.name);
                                        //关闭当前frame
                                        parent.layer.close(index);
                                    })
                                } else {
                                    alert('添加失败!')
                                }
                            }
                        })
                    }
                })
            }
        </script>


</body>

</html>